/**
 * 用户特征选择组件
 */

import React from 'react';
import Group from './Group.jsx';

import filterStyle from './Filter.less';

import Slider from 'material-ui/lib/slider';

const sliderStyle = {
	margin: 0, width: '100%'
}

const noop = function() { }

export default class UserFeatureGroup extends React.Component {
	static propTypes = {
		range: React.PropTypes.shape({
			start: React.PropTypes.number,
			end: React.PropTypes.number
		}),
	};

	state = {
		start: 0,
		end: 0
	};

	static defaultProps = {
		onRangeChange: noop
	};

	constructor(props) {
		super(props);
	}

	componentDidMount() {
		let { range } = this.props;
		this.setState(range);
	}

	// 处理变化
	handleChange = (event, value, id) => {
		let state = this.state;
		state[id] = value;

		this.setState(state);
	};

	// 释放本次拖拽
	handleDragStop = (event) => {
		let { onRangeChange } = this.props;
		let { start, end } = this.state;

		onRangeChange({start, end});
	};

	render() {
		let { start, end } = this.state;

		return (
			<Group name='用户特征'>
				<div className={filterStyle.inline}>
					<Slider 
						style={sliderStyle} 
						min={0} 
						max={100} 
						step={1} 
						value={start}
						onChange={(event, value) => this.handleChange(event,value,'start')}
						onDragStop={this.handleDragStop} />
					<span>{start}</span>
				</div>
				<div className={filterStyle.inline}>
					<Slider 
						id='end'
						style={sliderStyle} 
						min={0} 
						max={100} 
						step={1} 
						value={end}
						onChange={(event, value) => this.handleChange(event, value, 'end')} 
						onDragStop={this.handleDragStop} />
					<span>{end}</span>
				</div>
			</Group>
		);
	}
}